/*
* @ddescription: 换货发货弹窗
* @Author: liyujie
* @Date: 2020-12-08
*/
<template>
    <div
        class="logisticsDelevery"
        v-if="dialogVisible"
    >
        <el-dialog
            title="确认发货"
            :visible.sync="dialogVisible"
            width="640px"
            :close-on-click-modal="false"
        >
            <p class="delevery_title">
                收件人信息
            </p>
            <div class="delevery_item">
                <p class="item_title">
                    收件人:
                </p>
                <p class="item_content">
                    {{ user_name ? user_name : '--' }}
                </p>
            </div>
            <div class="delevery_item">
                <p class="item_title">
                    手机号码:
                </p>
                <p class="item_content">
                    {{ phone ? phone : '--' }}
                </p>
            </div>
            <div class="delevery_item">
                <p class="item_title">
                    收件地址:
                </p>
                <p class="item_content">
                    {{ detail_info ? detail_info : '--' }}
                </p>
            </div>
            <p class="delevery_info">
                物流信息
            </p>
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                label-position="left"
                class="demo-ruleForm"
                hide-required-asterisk
                style="margin-top: 12px"
            >
                <el-form-item
                    label="快递公司"
                    prop="region"
                >
                    <el-autocomplete
                        v-model="ruleForm.region"
                        :fetch-suggestions="querySearchAsync"
                        placeholder="请选择选择快递公司"
                        @select="handleSelect"
                        @blur="fnClearIpt"
                        size="small"
                        :style="{width: '444px'}"
                    />
                </el-form-item>
                <el-form-item
                    label="快递单号"
                    prop="tracking_no"
                >
                    <el-input
                        v-model="ruleForm.tracking_no"
                        placeholder="请填写快递单号"
                        size="small"
                        clearable
                        :style="{width: '444px'}"
                    />
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    @click="dialogVisible = false"
                    size="medium"
                    type="default"
                    :style="{width: '120px', marginRight: '32px'}"
                >
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    @click="fnSubmit"
                    :style="{width: '120px'}"
                >
                    确认发货
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'ExchangeDelivery',
    data () {
        return {
            user_name: '',
            phone: '',
            detail_info: '',
            apply_no: '',
            dialogVisible: false,
            ruleForm: {
                region: '',
                tracking_no: ''
            },
            rules: {
                region: [
                    { required: true, message: '请选择快递公司', trigger: 'change' }
                ],
                tracking_no: [
                    { required: true, message: '请填写物流单号', trigger: 'blur' }
                ],
            },
            timeout: '',
            address: '',
            iptResult: '',
            expressRm: [],
            expressAll: []
        };
    },
    watch: {
        dialogVisible (val) {
            if(!val) {
                this.ruleForm = {
                    region: '',
                    tracking_no: ''
                };
                this.address = '';
            }
        }
    },
    mounted () {
        this.getExpress(1, resp => {
            this.restaurants = resp;
            this.expressRm = resp;
        });
        this.getExpress(0, resp => {
            this.expressAll = resp;
        });
    },
    methods: {
        /**
         * @description 打开弹窗
         * @param row
         */
        show (row) {
            this.dialogVisible = true;
            this.apply_no = row.apply_no;
            if(row.return_address_info) {
                this.user_name = row.return_address_info.user_name;
                this.phone = row.return_address_info.phone;
                this.detail_info = row.return_address_info.detail_info;
            }
        },

        /**
         * @description 关闭弹窗
         */
        close () {
            this.dialogVisible = false;
        },

        /**
         * @description 确认发货
         */
        fnSubmit () {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    // 发货
                    let params = {
                        apply_no: this.apply_no,
                        type: 5,
                        return_logistics_no: this.address,
                        return_tracking_no: this.ruleForm.tracking_no
                    };

                    this.$post('/__student/ShopGoodsOrderCancelApply/verify', params).then(resp => {
                        if (resp.code === 1) {
                            this.dialogVisible = false;
                            this.$emit('update');
                            this.$notify({
                                title: '提示',
                                message: '操作成功',
                                duration: 2000,
                                type: 'success'
                            });
                        } else {
                            this.$notify({
                                title: '警告',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                    });
                }
            });
        },

        /**
         * @description 物流搜索
         */
        querySearchAsync(queryString, cb) {
            var restaurants = null;

            if (queryString == '' || queryString == null) {
                restaurants = this.expressRm;
            } else {
                restaurants = this.expressAll;
            }
            var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

            this.iptResult = results;
            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                cb(results);
            }, 200 * Math.random());
        },
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        handleSelect(item) {
            this.address = item.address;
        },
        fnClearIpt () {
            if (this.iptResult.length == 0) {
                this.ruleForm.region = '';
            }
        },

        /**
         * @description 获取物流公司信息
         */
        getExpress (no, callback) {
            this.$post('/__student/Logistics/getList', {
                type: no
            }).then(resp=>{
                if (resp.code == 1) {
                    let list = [];

                    resp.data.list.map((item,index)=>{
                        list.push({
                            value: item.name,
                            address: item.logistics_no
                        });
                    });
                    callback(list);
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.logisticsDelevery {
    display: flex;
    flex-direction: column;
    .delevery_title {
        color: #333;
        font-size: 14px;
        font-weight: 500;
    }
    .delevery_item {
        margin-top: 24px;
        display: flex;
        align-items: center;
        .item_title {
            color: #888;
            font-size: 14px;
            margin-right: 8px;
        }
        .item_content {
            color: #333;
            font-size: 14px;
            white-space: nowrap;
        }
    }
    .delevery_info {
        color: #333;
        font-size: 14px;
        font-weight: 500;
        margin-top: 42px;
    }
    .item_list {
        height: 32px;
        display: flex;
        margin-top: 24px;
        align-items: center;
        .item_list_title {
            color: #666;
            font-size: 14px;
            margin-right: 12px;
            white-space: nowrap;
        }
    }
    .dialog-footer {
        display: flex;
        justify-content: center;
    }
}
/deep/ .el-dialog__body {
    padding: 24px 60px;
}

/deep/ .el-form-item__label {
    color: #888;
    font-size: 14px;
}
/deep/ .el-form-item {
    margin-bottom: 22px;
}
</style>

